<template>
	<view class="page">
		<headerinfo></headerinfo>
		<u-navbar title="手机号登录" :placeholder="true" :titleStyle="titleStyle" leftIconColor="#fff" :bgColor="bgColor"   :autoBack="true" ></u-navbar>

		<view class="login_form">
			
			<view class="list">
				<view class="label ">手机号</view>
				<u--input type="number" maxlength="11" fontSize="15" border="none" placeholder="请输入新手机号" v-model="form.phone"></u--input>
			</view>
			<view class="list">
				<view class="label ">验证码</view>
				<u--input type="number" fontSize="15" border="none" placeholder="请输入验证码" v-model="form.code"></u--input>
				<u-button  class="sendCode border-main main-text-color" type="primary" :plain="true" @tap="getCode" :text="tips"></u-button>
			</view>
		</view>
		
		<view class="agree" @click="agreeCheck = !agreeCheck">
			<image v-if="agreeCheck" src="../../static/images/radio_check.png" mode="widthFix"></image>
			<image v-else src="../../static/images/radio.png" mode="widthFix"></image>
			<view class="agree_text grey">
				我已阅读并同意中羽联
				<span class="main-text-color">用户协议</span>
				和
				<span class="main-text-color">隐私政策</span>
			</view>
		</view>
		
		<view class="loginBtn main-bg-color" @click="submit">提 交</view>

		
		<u-code :seconds="seconds"  ref="uCode" @change="codeChange"></u-code>
	</view>
</template>

<script>
export default {
	data() {
		return {
			agreeCheck: false,
			bgColor: '#08C060',
			titleStyle: {
				color: '#fff'
			},
			form: {
				phone: '',
				provider: '',
				code:'',
				openId:'',
			},
			tips: '',
			seconds: 60,
		};
	},
	onLoad() {
	},
	methods: {
		submit(){
			
			if(!this.$utils.checkModbile(this.form.phone)){
				return this.$Show.show('手机号格式不正确')
			}
			
			if(this.form.code == '' ){
				return this.$Show.show('验证码不能为空')
			}
			
			if(!this.agreeCheck){
				return this.$Show.show('请勾选用户协议及隐私政策')
			}
			
			this.$api.loginphone(this.form).then(res=>{
				console.log(res)
				uni.setStorageSync('token',res.token)
				uni.setStorageSync('familyId',res.familyIds)
				uni.setStorageSync('username',res.username)
				uni.reLaunch({
					url:'/pages/tabbar/index/index'
				})
			})
		},
		
		//验证码相关
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			
			if(!this.$utils.checkModbile(this.form.phone)){
				return this.$Show.show('手机号格式不正确')
			}
			
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				
				this.$api.getPhoneCode({phone:this.form.phone}).then(res=>{
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				})
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		
	}
};
</script>

<style lang="scss">
.login_form {
	background-color: #fff;
	margin-top: 30rpx;
	.list {
		display: flex;
		align-items: center;
		height: 90rpx;
		border-bottom: 1px solid #f8f8f8;
		position: relative;
		.label {
			width: 140rpx;
			text-align: right;
			margin-right: 20rpx;
		}
		.sendCode{
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 180rpx;
			height: 60rpx;
		}
	}
	.list:last-child {
		border: none;
	}
}

.agree {
	display: flex;
	align-items: center;
	padding-left: 30rpx;
	margin: 30rpx 0;
	image {
		width: 45rpx;
		height: 45rpx;
		margin-right: 10rpx;
	}
	span {
		text-decoration: underline;
	}
}

.loginBtn {
	width: 690rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	margin: 0 auto;
	margin-top: 40rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
}
</style>
